<template>
    <div class="app-container dialog" v-if="form">
            <div class="title">业务系统基本信息</div>
            <div class="wrap1">
                <div><div>系统名称:</div>{{form.projectname ? form.projectname : ''}}</div>
                <div><div>业务部门:</div>{{form.officeName}}</div>
                <div><div>上线时间:</div>{{form.onlinetime}}</div>
                <div><div>业主方联系人:</div>{{form.contactsNickName}}</div>
                <div><div>联系电话:</div>{{form.contactsinfo}}</div>
                <div><div>邮箱:</div>{{form.email}}</div>
                <div style="width: 100%;"><div>承建单位:</div>{{form.constunit}}</div>
                <div><div>承建方联系人:</div>{{form.constcts}}</div>
                <div><div>联系电话:</div>{{form.constctsinfo}}</div>
                <div><div>邮籍:</div>{{form.constemail}}</div>
                <div style="width: 100%;"><div style="width: auto;">系统建设（运维）资金来源:</div>{{form.fundFrom}}</div>
                <div style="width: 100%;"><div  style="width: auto;">自行落实部门上云经费:</div>{{form.fundBySelf?'是':'否'}}</div>
                <div style="width: 100%;"><div>项目简介:</div>{{form.introduction}}</div>
                <div style="width: 100%;"><div>申请理由:</div>{{form.remarks}}</div>
            </div>
            <div class="title">申请资源</div>
            <div v-if="false" style="width: 100%;"><label style="margin-right: 10px;">服务商:</label>
              <span >{{form.cloudSupplier_label}}</span>
            </div>
            <div class="wrap">
                <div class="wrap_title">
                    <div>服务器</div>
                </div>
                <el-table v-if="form.hosts"  :data="form.hosts"  style="width: 100%;margin-top: 13px;">
                        <el-table-column label="资源类型">
                            <template slot-scope="scope">
                                {{scope.row.flavorType==1?'云服务器':scope.row.flavorType==2?'高性能服务器':scope.row.serverCode?'数据库':'存储产品'}}
                            </template>
                        </el-table-column>
                        <el-table-column label="服务器名称 / 所属服务器">
                            <template slot-scope="scope">
                                <span v-if="scope.row.flavorType">{{scope.row.hostName}}</span>
                                <span v-else-if="scope.row.serverCode">{{scope.row.hostInstanceName||scope.row.host.instanceName}}</span>
                                <span v-else-if="!scope.row.hostInstanceNames.length"></span>
                                <div v-else style="margin-bottom: 6px;" v-for="(item,index) in scope.row.hostInstanceNames" :key="index">
                                    {{item}}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="资源详情">
                        <template slot-scope="scope">
                            <div
                            v-if="scope.row.flavorType"
                            placement="top-start"
                            width="300"
                            trigger="hover">
                                <div style="margin-bottom: 6px;">
                                    <label>可用域：</label>{{scope.row.availableDomain_label}}
                                </div>
                                <div style="margin-bottom: 6px;">
                                    <label>{{scope.row.flavorType==1?'规格分类':'资源类型'}}：</label>{{scope.row.cloudFlavorCode_label}}
                                </div>
                                <div style="margin-bottom: 6px;" v-if="scope.row.flavorType">
                                    <label>规格：</label>
                                    <!-- {{scope.row.cloudFlavorCode_desc}} -->
                                    {{scope.row.cpuNumber}}vCPU； {{scope.row.memorySize}}G内存
                                </div>
                                <div style="margin-bottom: 6px;" v-if="scope.row.flavorType==1">
                                    <!-- <label>系统盘：</label>{{scope.row.osDisk.diskServerCode_label}}，{{scope.row.osDisk.dataDiskSize}}GB -->
                                </div>
                                <div style="margin-bottom: 6px;" v-if="scope.row.flavorType==1">
                                    <label>操作系统：</label>{{scope.row.osName}}
                                </div>
                                <div style="margin-bottom: 6px;"><label>
                                    数据盘(共<span style="color: #E83112;">{{scope.row.disks.length}}</span>块){{scope.row.disks.length?':':''}}</label>
                                </div>
                                <div style="margin:0 0 6px 16px;" v-for="(item,index) in scope.row.disks" :key="index">
                                    <span>{{item.dataDiskType_label||item.diskServerName}}</span>，{{item.dataDiskSize}}GB
                                </div>
                            </div>
                        </template>
                        </el-table-column>
                        <el-table-column v-if="priceFlag"  width="600">
                            <template slot="header" slot-scope="scope">
                                <div style="text-align: center;">费用</div>
                                <div class="tab_wrap" >
                                    <div>名称</div>
                                    <div>单价</div>
                                    <div>用量</div>
                                    <div>总价（天）</div>
                                </div>
                            </template>
                            <template slot-scope="scope">
                                <div class="tab_wrap" v-for="(item,index) in scope.row.meterageList||[scope.row.meterage]" :key="index">
                                <div>{{item.resourceName}}</div>
                                <div>{{item.useCount}}{{item.useCountUnit}}</div>
                                <div> {{item.resourcePrice}}{{item.resourcePriceUnit}}</div>
                                <div> ¥{{item.resourcePriceTotalStr}}</div>
                                </div>
                            </template>
                        </el-table-column>
                </el-table>
            </div>
            <div class="wrap">
                <div class="wrap_title">
                    <div>数据库</div>
                </div>
                <el-table v-if="form.databases"  :data="form.databases"  style="width: 100%;margin-top: 13px;">
                        <el-table-column label="版本">
                            <template slot-scope="scope">
                                <span>{{ scope.row.databaseVersion }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="资源详情">
                        <template slot-scope="scope">
                            <div
                            if="scope.row.serverCode"
                            placement="top-start"
                            width="300"
                            trigger="hover">
                                <div style="margin-bottom: 6px;">
                                    <label>类型：</label>{{scope.row.serverCode_label}}
                                </div>
                                <div style="margin-bottom: 6px;">
                                    <label>版本：</label>{{scope.row.databaseVersion}}
                                </div>
                                <div style="margin-bottom: 6px;">
                                    <label>位数：</label>{{scope.row.systemDigits}}
                                </div>
                            </div>
                        </template>
                        </el-table-column>
                        <el-table-column v-if="priceFlag"  width="600">
                            <template slot="header" slot-scope="scope">
                                <div style="text-align: center;">费用</div>
                                <div class="tab_wrap" >
                                    <div>名称</div>
                                    <div>单价</div>
                                    <div>用量</div>
                                    <div>总价（天）</div>
                                </div>
                            </template>
                            <template slot-scope="scope">
                                <div class="tab_wrap" v-for="(item,index) in scope.row.meterageList||[scope.row.meterage]" :key="index">
                                <div>{{item.resourceName}}</div>
                                <div>{{item.useCount}}{{item.useCountUnit}}</div>
                                <div> {{item.resourcePrice}}{{item.resourcePriceUnit}}</div>
                                <div> ¥{{item.resourcePriceTotalStr}}</div>
                                </div>
                            </template>
                        </el-table-column>
                </el-table>
            </div>
            <div class="wrap">
                <div class="wrap_title">
                    <div>存储产品</div>
                </div>
                <el-table v-if="form.storeProducts" :data="form.storeProducts"  style="width: 100%;margin-top: 13px;">
                        <el-table-column label="磁盘类型">
                            <template slot-scope="scope">
                                {{ scope.row.diskServerName? scope.row.diskServerName:scope.row.diskServerCode_label }}
                            </template>
                        </el-table-column>
                        <el-table-column label="磁盘用量">
                            <template v-if='scope.row.dataDiskSize' slot-scope="scope">
                                <span> {{ scope.row.dataDiskSize }}GB </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="资源详情">
                        <template slot-scope="scope">
                            <div
                            placement="top-start"
                            width="300"
                            trigger="hover">
                                <div style="margin-bottom: 6px;">
                                    <label>存储类型：</label>{{scope.row.productCode}}
                                </div>
                                <div style="margin-bottom: 6px;">
                                    <label>服务类型：</label>{{scope.row.diskCode}}
                                </div>
                                <div style="margin-bottom: 6px;">
                                    <!-- <label>磁盘：</label>{{scope.row.diskServerCode_label}}，{{scope.row.dataDiskSize}}GB -->
                                </div>
                            </div>
                        </template>
                        </el-table-column>
                        <el-table-column v-if="priceFlag"  width="600">
                            <template slot="header" slot-scope="scope">
                                <div style="text-align: center;">费用</div>
                                <div class="tab_wrap" >
                                    <div>名称</div>
                                    <div>单价</div>
                                    <div>用量</div>
                                    <div>总价（天）</div>
                                </div>
                            </template>
                            <template slot-scope="scope">
                                <div class="tab_wrap" v-for="(item,index) in scope.row.meterageList||[scope.row.meterage]" :key="index">
                                <div>{{item.resourceName}}</div>
                                <div>{{item.useCount}}{{item.useCountUnit}}</div>
                                <div> {{item.resourcePrice}}{{item.resourcePriceUnit}}</div>
                                <div> ¥{{item.resourcePriceTotalStr}}</div>
                                </div>
                            </template>
                        </el-table-column>
                </el-table>
            </div>
            <div class="wrap">
            <div class="wrap_title">
                <div>安全产品</div>
            </div>
            <div style="padding: 20px 20px; width: 100%">
                <el-table
                v-if="form.safeProducts"
                    :data="[].concat(form.safeProducts)"
                    style="width: 100%; margin-top: 13px"
                >
                    <el-table-column label="产品名称">
                        <template slot-scope="scope">
                            {{ scope.row.productName }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

            <div  v-if="priceFlag"  style="margin-top: 10px;text-align: right;color: rgb(167,167,167);">
              预估费用：<span style="color: rgb(255,173,77);font-size: 24px;">¥{{parseInt( form.dailyPriceTotal)}}</span>/天
              <span style="margin-left: 20px;color: rgb(255,173,77);font-size: 24px;">¥{{parseInt(form.yearPriceTotal)}}</span>/年
            </div>
            <div v-if="false" class="title" style="margin-top: 30px;">安全产品</div>
            <div v-if="false" class="wrap1">
                <div style="width: 100%;"><span v-for="(item,index) in form.safeProducts" style="margin-left: 20px;" :key="index">{{item.productName}}</span></div>
            </div>
            <template v-if="false">
                <div v-if="otherFlag" class="title" style="margin-top: 30px;">其他</div>
                <div v-if="otherFlag" class="wrap2" style="padding-top: 1px;">
                    <div style="display: flex;"><span style="font-weight: bold;margin-right: 10px;">说明:</span>{{form.remark}}</div>
                <div style="font-weight: bold;">文件:</div>
                <div style="display: flex;flex-wrap: wrap;">
                    <img style="width: 145px;height: 145px;border-radius: 6px;margin:0 20px 20px 0;border: 1px solid #c0ccda;"
                    v-for="(item,index) in form.files" :key="index" :src="item.id?(base_url+item.filePath):item.url" @click="handlePictureCardPreview(item.id?(base_url+item.filePath):item.url)"/>
                </div>
                </div>
            </template>
            <el-dialog :visible.sync="dialogVisible">
              <div style="max-height: 90vh;overflow-y: scroll;">
                <img width="100%" :src="dialogImageUrl" alt="">
              </div>
            </el-dialog>
        </div>
</template>

<script>
import {
    cloudUpList,
    cloudUpConfInfo,
    PtuConfirms,
    ConfirmCloudUp,
    addCloudUp
  } from "@/api/cloud/cloud";
import {
    resourcesUpDetail,
    listByCode,
    serviceByClazz,
} from "@/api/resources/apply";
import { getDicts } from "@/api/system/dict/data";

export default {
    name: "detailinde",
    components: {},
    data() {
        return {
            form: null,
            otherFlag : true,
            priceFlag : false,
            addShow: false,
            index : 0,
            configure: JSON.parse(sessionStorage.getItem('configure')),
            // configure: {
            //     available_domain: [], //可用域
            //     cloud_service_provider: [], //服务商
            //     storage_type: [], //系统盘类型
            //     codeList: [], //云服务器规格列表
            //     czxtList: [], //操作系统列表
            //     ccList: [], //数据盘类型
            //     fwcpList: [], //服务型磁盘类型
            //     wlfwqList: [], //高性能服务器资源类型
            //     sjkList: [], //数据库类型
            //     yyaqList: [], //安全产品
            // },
            base_url:process.env.VUE_APP_BASE_API,
            dialogImageUrl: '',
            dialogVisible: false
        };
    },
    created() {
        //可用域
        // getDicts("available_domain").then((response) => {
        //     this.configure.available_domain = response.data;
        // });
        // //服务商
        // getDicts("cloud_service_provider").then((response) => {
        //     this.configure.cloud_service_provider = response.data;
        // });
        // //盘类型
        // serviceByClazz({ code: "cc" }).then((response) => {
        //     response.data.forEach((item) => {
        //         if (
        //             ["FCcc(tykcc)2", "FCcc_ssd", "spycc2"].indexOf(item.code) <
        //             0
        //         ) {
        //             this.configure.storage_type.push(item);
        //         }
        //         if (["spycc2"].indexOf(item.code) < 0) {
        //             this.configure.ccList.push(item);
        //         }
        //         if (
        //             ["fbscc_wjcc2", "FCcc(tykcc)2", "FCcc_ssd"].indexOf(
        //                 item.code
        //             ) < 0
        //         ) {
        //             this.configure.fwcpList.push(item);
        //         }
        //     });
        // });
        // //操作系统
        // serviceByClazz({ code: "czxt" }).then((response) => {
        //     this.configure.czxtList = response.data;
        // });
        // //云服务器规格列表
        // listByCode("spec_ecs").then((response) => {
        //     this.configure.codeList = response.data;
        // });
        // //高性能服务器资源类型列表
        // serviceByClazz({ code: "wlfwq" }).then((response) => {
        //     this.configure.wlfwqList = response.data;
        // });
        // //数据库类型列表
        // serviceByClazz({ code: "sjk" }).then((response) => {
        //     this.configure.sjkList = response.data;
        // });
        // //安全产品列表
        // serviceByClazz({ code: "yyaq" }).then((response) => {
        //     this.configure.yyaqList = response.data;
        // });

    },
    mounted(){
        cloudUpConfInfo(this.$route.params.Id).then((res) => {
            let detail = res.data;
            if(res.data.diskServerCode_label){
                detail.storeProducts.forEach((data) => {
                    this.configure[
                        data.productCode == "共享型" ? "ccList" : "fwcpList"
                    ].some((it) => {
                        if (it.code == data.diskServerCode) {
                            data.diskServerCode_label = it.serviceName;
                            return true;
                        }
                    });
                    data.hostInstanceNames = [];
                    if (data.hosts) {
                        data.hosts.forEach((item) => {
                            data.hostInstanceNames.push(item.instanceName);
                        });
                    }
                });
            }
            detail.databases.forEach((data) => {
                this.configure.sjkList.some((it) => {
                    if (it.code == data.serverCode) {
                        data.serverCode_label = it.serviceName;
                        return true;
                    }
                });
            });
            detail.hosts.forEach((data) => {
                data.hostName = data.instanceName;
                //可用域
                this.configure.available_domain.some((item) => {
                    if (item.dictValue == data.availableDomain) {
                        data.availableDomain_label = item.dictLabel;
                        return true;
                    }
                });
                //系统盘类型
                if (data.osDisk) {
                    this.configure.storage_type.some((item) => {
                        if (item.code == data.osDisk.diskServerCode) {
                            data.osDisk.diskServerCode_label = item.serviceName;
                            return true;
                        }
                    });
                }
                //数据盘类型
                if (data.disks) {
                    data.disks.forEach((item) => {
                        this.configure.ccList.some((it) => {
                            if (it.code == item.diskServerCode) {
                                item.diskServerCode_label = it.serviceName;
                                return true;
                            }
                        });
                    });
                } else {
                    data.disks = [];
                }
                //规格
                if (data.flavorType == 1) {
                    this.configure.codeList.some((item) => {
                        if (item.specCode == data.cloudFlavorCode) {
                            data.cloudFlavorCode_label = item.specName;
                            data.cloudFlavorCode_desc = item.desc;
                            return true;
                        }
                    });
                }
                if (data.flavorType == 2) {
                    this.configure.wlfwqList.some((item) => {
                        if (item.code == data.cloudFlavorCode) {
                            data.cloudFlavorCode_label = item.serviceName;
                            data.cloudFlavorCode_desc = item.remark;
                            return true;
                        }
                    });
                }
            });
            this.form = detail;
        });
    },
    computed: {
        visitedViews() {
            return this.$store.state.tagsView.visitedViews
        }
    },
    watch: {
        'visitedViews'(value) {
            if(value){
                if(this.$options.name == 'detailinde'){
                    this.$forceUpdate()
                    return
                }
                this.$destroy(this.$options.name)
            }
        }
    },
    methods: {
        //文件预览
        handlePictureCardPreview(url) {
            this.dialogImageUrl = url;
            this.dialogVisible = true;
        },
      // 新增资源
        showAdd(num, data, index){
            this.index = index;
            this.addShow = num;
            setTimeout(() => {
                this.$refs.addBdialog.init(JSON.parse(JSON.stringify(data)));
            }, 200);
        },
        dels(data,index){
            this.$confirm("是否删除?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                }).then(() => {
                    this.form.safeProducts.splice(index,1)
            })
        },
        //删除
        del(data, index) {
            this.$confirm("是否删除?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                }).then(() => {
                    if (index < this.form.hosts.length) {
                        this.form.hosts.splice(index, 1);
                        this.form.databases = this.form.databases.filter((item) => {
                            return item.hostId != data.id;
                        });
                        this.form.storeProducts = this.form.storeProducts.filter((item) => {
                                return item.hostIds.indexOf(data.id) < 0;
                            }
                        );
                    } else if (
                        index <
                        this.form.hosts.length + this.form.databases.length
                    ) {
                        this.form.databases.splice(index - this.form.hosts.length, 1);
                    } else {
                        this.form.storeProducts.splice(
                            index - this.form.hosts.length - this.form.databases.length,
                            1
                        );
                    }
            })
        },
        //添加修改表格
        addTable(data) {
            data = JSON.parse(JSON.stringify(data));
            if (data.flavorType) {
                this.addHosts(data);
            } else if (data.serverCode) {
                this.addDatabases(data);
            } else if(data.diskServerCode) {
                this.addStoreProducts(data);
            }else{
                this.addShow = false;
                let hostIds = []
                this.form.hosts.forEach(item=>{
                    hostIds.push(item.id)
                })
                this.form.safeProducts = []
                let safeProductsAll = []
                this.configure.yyaqList.forEach(item=>{
                    safeProductsAll.push({
                        productCode: item.code,
                        productName: item.serviceName,
                        hostIds,
                    });
                })
                this.form.safeProducts = safeProductsAll
            }
        },
        //添加存储产品列表
        addStoreProducts(data) {
            this.configure[
                data.productCode == "共享型" ? "ccList" : "fwcpList"
            ].some((it) => {
                if (it.code == data.diskServerCode) {
                    data.diskServerCode_label = it.serviceName;
                    return true;
                }
            });
            let storeProducts = JSON.parse(
                JSON.stringify(this.form.storeProducts)
            );
            if (this.addShow == 2) {
                storeProducts[this.index] = data;
            } else {
                storeProducts.push(data);
            }
            this.form.storeProducts = storeProducts;
            this.addShow = false;
        },
        //添加修改数据库列表
        addDatabases(data) {
            //数据库类型
            this.configure.sjkList.some((it) => {
                if (it.code == data.serverCode) {
                    data.serverCode_label = it.serviceName;
                    return true;
                }
            });
            let databases = JSON.parse(JSON.stringify(this.form.databases));
            if (this.addShow == 2) {
                databases[this.index] = data;
            } else {
                databases.push(data);
            }
            this.form.databases = databases;
            this.addShow = false;
        },
        //添加修改服务器列表
        addHosts(data) {
            //可用域
            this.configure.available_domain.some((item) => {
                if (item.dictValue == data.availableDomain) {
                    data.availableDomain_label = item.dictLabel;
                    return true;
                }
            });
            //数据盘类型
            data.disks.forEach((item) => {
                this.configure.ccList.some((it) => {
                    if (it.code == item.diskServerCode) {
                        item.diskServerCode_label = it.serviceName;
                        return true;
                    }
                });
            });
            if (data.flavorType == 1) {
                //系统盘类型
                this.configure.storage_type.some((item) => {
                    if (item.code == data.osDisk.diskServerCode) {
                        data.osDisk.diskServerCode_label = item.serviceName;
                        return true;
                    }
                });
                //规格
                this.configure.codeList.some((item) => {
                    if (item.specCode == data.cloudFlavorCode) {
                        data.cloudFlavorCode_label = item.specName;
                        data.cloudFlavorCode_desc = item.desc;
                        return true;
                    }
                });
            }
            if (data.flavorType == 2) {
                this.configure.wlfwqList.some((item) => {
                    if (item.code == data.cloudFlavorCode) {
                        data.cloudFlavorCode_label = item.serviceName;
                        data.cloudFlavorCode_desc = item.remark;
                        return true;
                    }
                });
            }
            let hosts = JSON.parse(JSON.stringify(this.form.hosts));
            if (this.addShow == 2) {
                if (
                    data.hostName &&
                    data.hostName == data.instanceName + "_" + data.num
                ) {
                    hosts[this.index] = data;
                } else {
                    hosts.splice(this.index, 1);
                    let sum = 0;
                    hosts.forEach((item) => {
                        if (
                            item.instanceName == data.instanceName &&
                            item.num > sum
                        ) {
                            sum = item.num;
                        }
                    });
                    data.num = sum + 1;
                    data.hostName = data.instanceName + "_" + data.num;
                    hosts.push(data);
                }
            } else {
                let num = Number(data.instanceNum);
                data.instanceNum = 1;
                let sum = 0;
                hosts.forEach((item) => {
                    if (
                        item.instanceName == data.instanceName &&
                        item.num > sum
                    ) {
                        sum = item.num;
                    }
                });
                for (let i = 0; i < num; i++) {
                    let temp = JSON.parse(JSON.stringify(data));
                    if (!temp.num) {
                        temp.num = sum + i + 1;
                    }
                    temp.hostName = temp.instanceName + "_" + temp.num;
                    hosts.push(temp);
                }
            }
            this.form.hosts = hosts;
            this.addShow = false;
        },
        locking(){
            this.$confirm("是否确认无误?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                }).then(() => {
                    PtuConfirms(this.form.id).then(res=>{
                        if(res.code == 200){
                            this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
                            this.$destroy(this.$options.name)
                            this.$router.push('/cloud/cloudapply')
                        }
                    })
            })
        },
        ConfirmModification(){
            this.$confirm("是否确认修改?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                }).then(() => {
                    ConfirmCloudUp(this.form).then(res=>{
                        if(res.code == 200){
                            this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
                            this.$destroy(this.$options.name)
                            this.$router.push('/cloud/cloudapply')
                        }
                    })
            })
        }
    },
};
</script>

<style scoped lang="less">
.dialog {
    padding-right: 20px;
    font-size: 12px;
    .title {
        text-align: left;
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 4px solid #38b3aa;
    }
    .wrap {
        display: flex;
        background: #faf9ff;
        margin-top: 20px;
        border-radius: 10px;

        .wrap_title {
            padding: 0 10px;
            background: #f4f4f4;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;

            div {
                height: 100%;
                width: 14px;
                font-weight: bold;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
        }

        .wrap_item {
            display: flex;
            margin-top: 20px;

            div:first-child {
                width: 90px;
                font-weight: bold;
            }

            i {
                line-height: 28px;
                margin-right: 10px;
                font-size: 20px;
                color: #e83112;
            }
        }
    }
    .wrap1 {
        padding: 0 20px 20px 0px;
        background: #faf9ff;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 30px;
        // justify-content: space-between;
        border-radius: 10px;
        div {
            margin-top: 20px;
            margin-left: 20px;
            width: calc(33.33% - 20px);
            min-width: 340px;
            display: flex;
            div {
                width: 100px;
                min-width: 100px;
                font-weight: bold;
                margin: 0;
                display: flex;
                padding-right: 10px;
                justify-content: flex-end;
                color: #606266;
            }
        }
    }
    .wrap2 {
        padding: 0 20px 20px 20px;
        background: #faf9ff;
        margin-bottom: 30px;
        justify-content: space-between;
        border-radius: 10px;
        div {
            margin-top: 20px;
        }
    }
    .wrap3 {
        padding: 20px;
        background: #faf9ff;
        margin-bottom: 30px;
        justify-content: space-between;
        border-radius: 10px;
    }
    .tab_wrap {
        display: flex;
        justify-content: space-between;
        div {
            width: 25%;
            padding: 10px 0;
        }
        div:first-child {
            font-weight: bold;
        }
    }
}
</style>
